<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!--JSTL  -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html>
<html lang="en">
<head>
<title>全部课程</title>

<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="js/jquery-2.0.3.js" type="text/javascript" charset="utf-8"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/css/bootstrap.min.css">

<!-- FontAwesome CSS -->
<link rel="stylesheet" href="css/css/font-awesome.min.css">

<!-- ElegantFonts CSS -->
<link rel="stylesheet" href="css/css/elegant-fonts.css">

<!-- themify-icons CSS -->
<link rel="stylesheet" href="css/css/themify-icons.css">

<!-- Swiper CSS -->
<link rel="stylesheet" href="css/css/swiper.min.css">

<!-- 分页导航  CSS -->
<link rel="stylesheet" href="./css/x-admin.css" media="all">

<!-- Styles -->
<link rel="stylesheet" href="style.css">
<style type="text/css">
.dropdown {
	display: inline-block;
}

.dropdown-content {
	display: none;
	position: absolute;
	background: transparent;
	min-width: 150px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

.dropdown-content a:hover {
	color: #19c880;
}

.dropdown:hover .dropdown-content {
	display: block;
}
</style>



</head>
<body class="courses-page">
	<div class="page-header">
		<header class="site-header">
			<div class="top-header-bar">
				<div class="container-fluid"></div>
				<!-- .container-fluid -->
			</div>
			<!-- .top-header-bar -->

			<div class="nav-bar">
				<div class="container">
					<div class="row">
						<div class="col-9 col-lg-3">
							<div class="site-branding">
								<h1 class="site-title">
									<a href="Main.jsp" rel="home">Emp<span>Traning</span></a>
								</h1>
							</div>
							<!-- .site-branding -->
						</div>
						<!-- .col -->

						<div
							class="col-3 col-lg-9 flex justify-content-end align-content-center">
							<nav
								class="site-navigation flex justify-content-end align-items-center">
								<ul  style="overflow: inherit;"
									class="flex flex-column flex-lg-row justify-content-lg-end align-content-center">
									<li><a href="Main.jsp">我的主页</a></li>
									<li class="current-menu-item"><a href="BeforeCourses.jsp">课程浏览</a></li>
									<li>
										<div class="dropdown" id="c1">
											<a href="EmpCourseApl.jsp" class="dropbtn"
												class="current-menu-item">我的课程 <span id="down1"
												class="fa fa-caret-down"
												style="margin-left: 10px; display: block;"></span> <span
												id="up1" class="fa fa-caret-up"
												style="margin-left: 10px; display: none;"></span>
											</a>
											<div class="dropdown-content">
												<a
													href="CCPTServlet?op=queryByEmp&empTel=${sessionScope.username}&applyState=0">申请中</a>
												<a
													href="CCPTServlet?op=queryByEmp&empTel=${sessionScope.username}&applyState=1">已通过</a>
												<a
													href="CCPTServlet?op=queryByEmp&empTel=${sessionScope.username}&applyState=2">未通过</a>
												
											</div>
										</div>
									</li>
									<li><a href="CourseEvaluation.jsp">课程评价</a></li>
									<li><a href="EmpScoreBefore.jsp">我的成绩</a></li>
									<li>
										<div class="dropdown">
											<a href="EmpInfo.jsp" class="dropbtn">个人中心 <span
												id="down" class="fa fa-caret-down"
												style="margin-left: 10px; display: block;"></span> <span
												id="up" class="fa fa-caret-up"
												style="margin-left: 10px; display: none;"></span>
											</a>
											<div class="dropdown-content">
												<a href="EmpInfo.jsp">个人信息</a>
												<a href="#" id="Logout">退出登录</a>
											</div>
										</div>
									</li>
								</ul>

			
							</nav>
							<!-- .site-navigation -->
						</div>
						<!-- .col -->
					</div>
					<!-- .row -->
				</div>
				<!-- .container -->
			</div>
			<!-- .nav-bar -->
		</header>
		<!-- .site-header -->

		<div class="page-header-overlay">
			<div class="container">
				<div class="row">
					<div class="col-12">
						<header class="entry-header">
							<h1>全部课程</h1>
						</header>
						<!-- .entry-header -->
					</div>
					<!-- .col -->
				</div>
				<!-- .row -->
			</div>
			<!-- .container -->
		</div>
		<!-- .page-header-overlay -->
	</div>
	<!-- .page-header -->

	<div class="container">

		<div class="row">
			<div class="col-12 col-lg-8">
				<div class="featured-courses courses-wrap">
					<div class="row mx-m-25">

						<!-- 课程计划信息  -->
						<!-- 如果属性范围内的pd为null，我们就跳转到UserServlet去获取数据，然后再转发回来 -->
						<c:if test="${pd==null}">
							<!-- c:redirect 跳转到 UserServlet -->
							<c:redirect url="CCPTServlet?op=queryByPage"></c:redirect>
						</c:if>
						<!-- 如果 范围内的list不为空，遍历数据并展示结果 -->
						<c:if test="${pd!=null}">
							<c:forEach items="${pd.data}" var="ccpt">

								<div class="col-12 col-md-6 px-25">
									<div class="course-content">
										<figure class="course-thumbnail">
											<a href="#"><img src="${ccpt.coursePic}" alt=""></a>
										</figure>
										<!-- .course-thumbnail -->

										<div class="course-content-wrap">
											<header class="entry-header">
												<h2 class="entry-title">
													<a
														href="SingleCourses.jsp?
													courseName=${ccpt.courseName}
													&courseNowNum=${ccpt.courseNowNum}
													&cpNo=${ccpt.cpNo}
													&coursePic=${ccpt.coursePic}
													&courseStatus=${ccpt.courseStatus}
													&subJect=${ccpt.subJect}
													&teacherPic=${ccpt.teacherPic}
													&teacherName=${ccpt.teacherName}
													&courseNum=${ccpt.courseNum}
													&courseDesc=${ccpt.courseDesc}
													&courseStart=${ccpt.courseStart}
													&courseEnd=${ccpt.courseEnd}
													&courseTime=${ccpt.courseTime}
													&coursePlace=${ccpt.coursePlace}
													&teacherXl=${ccpt.teacherXl}
													&teacherSex=${ccpt.teacherSex}
													&teacherTel=${ccpt.teacherTel}
													&teacherDesc=${ccpt.teacherDesc}
													">${ccpt.courseName}</a>
												</h2>

												<div class="entry-meta flex flex-wrap align-items-center">
													<div class="course-author">
														<a href="#">Ms. ${ccpt.teacherName} </a>
													</div>

													<div class="course-date">${ccpt.courseStart}</div>
												</div>
												<!-- .course-date -->
											</header>
											<!-- .entry-header -->

											<footer
												class="entry-footer flex flex-wrap justify-content-between align-items-center">
												<div class="course-cost">${ccpt.subJect}</div>
												<!-- .course-cost -->

												
												<!-- .course-ratings -->
											</footer>
											<!-- .entry-footer -->
										</div>
										<!-- .course-content-wrap -->
									</div>
									<!-- .course-content -->
								</div>
								<!-- .col -->

							</c:forEach>
						</c:if>


					</div>
					<!-- .row -->
				</div>
				<!-- .featured-courses -->

				<!-- 分页导航 -->
				<div id="page" style="margin-top: 20px; margin-bottom: 120px"></div>


			</div>
			<!-- .col -->

			<div class="col-12 col-lg-4">
				<div class="sidebar">
					<div class="search-widget">
						<form class="flex flex-wrap align-items-center"
							action="CCPTServlet" method="post">
							<input type="hidden" name="op" value="queryByPage" /> <input
								type="search" placeholder="Search..." name="keywords"
								value="${keywords}" id="keywords">
							<button type="submit"
								class="flex justify-content-center align-items-center">
								<i class="fa fa-search"></i>
							</button>
						</form>
						<!-- .flex -->
					</div>
					<!-- .search-widget -->

					<div class="cat-links">
						<h2>课程类型</h2>

						<ul class="p-0 m-0" id="allSubJect">

						</ul>
					</div>
					<!-- .cat-links -->

					<div class="latest-courses">
						<h2>最新课程</h2>

						<ul class="p-0 m-0" id="latestCourses">

							<!-- 最新课程 -->

						</ul>
					</div>
					<!-- .latest-courses -->



					<div class="popular-tags">
						<h2>热门标签</h2>

						<ul class="flex flex-wrap align-items-center p-0 m-0">
							<li><a href="CCPTServlet?op=queryByPage&keywords=计算机">计算机</a></li>
							<li><a href="CCPTServlet?op=queryByPage&keywords=java编程">java编程</a></li>
							<li><a href="CCPTServlet?op=queryByPage&keywords=MySQL数据库">MySQL数据库</a></li>
							<li><a href="CCPTServlet?op=queryByPage&keywords=5G">5G</a></li>
							<li><a href="CCPTServlet?op=queryByPage&keywords=人工智能">人工智能</a></li>
							<li><a href="CCPTServlet?op=queryByPage&keywords=计算机视觉">计算机视觉</a></li>
							<li><a href="CCPTServlet?op=queryByPage&keywords=商业服务机器人">商业服务机器人</a></li>
							<li><a href="CCPTServlet?op=queryByPage&keywords=数据可视化">数据可视化</a></li>
							<li><a href="CCPTServlet?op=queryByPage&keywords=大数据">大数据</a></li>
						</ul>
					</div>
					<!-- .popular-tags -->
				</div>
				<!-- .sidebar -->
			</div>
			<!-- .col -->
		</div>
		<!-- .row -->
	</div>
	<!-- .container -->
	<footer class="site-footer">
		<div class="footer-widgets">
			<div class="container">
				<div class="row">
					<div class="col-12 col-md-6 col-lg-3">
						<h2 class="w-100">版权</h2>
						<div class="foot-about">
							<p class="footer-copyright">版权所有:bug总和我作队</p>
						</div>
						<!-- .foot-about -->
					</div>
					<!-- .col -->
					<div class="col-12 col-md-6 col-lg-3 mt-5 mt-md-0">
						<div class="foot-contact">
							<h2>联系我们</h2>

							<ul>
								<li>电子邮件：1727283192@qq.com</li>
								<li>电话：17606064136</li>
								<li>地址：福建省厦门市</li>
							</ul>
						</div>
						<!-- .foot-contact -->
					</div>
					<!-- .col -->

					<div class="col-12 col-md-6 col-lg-3 mt-5 mt-lg-0">
						<div class="quick-links flex flex-wrap">
							<h2 class="w-100">快速连接</h2>

							<ul class="w-50">
								<li><a href="about.html">关于 </a></li>
								<li><a href="#">使用条款</a></li>
								<li><a href="#">隐私政策 </a></li>
								<li><a href="#">联系我们</a></li>
							</ul>

						</div>
						<!-- .quick-links -->
					</div>
					<!-- .col -->

					<div class="col-12 col-md-6 col-lg-3 mt-5 mt-lg-0">
						<div class="follow-us">
							<h2>关注我们的动向</h2>
							<img src="images/erweima.png">
						</div>
						<!-- .quick-links -->
					</div>
					<!-- .col -->
				</div>
				<!-- .row -->
			</div>
			<!-- .container -->
		</div>
		<!-- .footer-widgets -->

	</footer>

	<script type='text/javascript' src='js/js/swiper.min.js'></script>
	<script type='text/javascript' src='js/js/masonry.pkgd.min.js'></script>
	<script type='text/javascript' src='js/js/jquery.collapsible.min.js'></script>
	<script type='text/javascript' src='js/js/custom.js'></script>

	<script src="./lib/layui/layui.js" charset="utf-8"></script>
	<script src="./js/x-layui.js" charset="utf-8"></script>
	<script src="js/jquery-2.0.3.js"></script>

	<script>
		$(".dropdown").mouseover(function() {
			$("#down").css('display', 'none');
			$("#up").css('display', 'block');
		});
		$(".dropdown").mouseout(function() {
			$("#down").css('display', 'block');
			$("#up").css('display', 'none');
		});
	</script>

	<script>
	$(function() {
		//课程类型
		$.get("CCPTServlet?op=ajaxReq", function(data) {
			$.each(data, function(index, subJect) {
				$("#allSubJect").append(
						"<li><a href='CCPTServlet?op=queryByPage&keywords="+subJect+"'>"+subJect+"</a></li>");
			});
		});
		
		//最新课程
		$.get("CCPTServlet?op=ajaxReq1", function(data) {
			$.each(data, function(index, lc) {
				$("#latestCourses").append(
						"<li class='flex flex-wrap justify-content-between align-items-center'>"
							+"<img src='"+lc.coursePic+"'>"
							+"<div class='content-wrap'>"
							    +"<p>"
							    +"<h2 class='entry-title'>"
							    +"<a href='SingleCourses.jsp?"
							    +"courseName="+lc.courseName
							    +"&cpNo="+lc.cpNo
							    +"&coursePic="+lc.coursePic
							    +"&courseStatus="+lc.courseStatus
							    +"&subJect="+lc.subJect
							    +"&teacherPic="+lc.teacherPic
							    +"&teacherName="+lc.teacherName
		                        +"&courseNum="+lc.courseNum
	                            +"&courseDesc="+lc.courseDesc
	                            +"&courseStart="+lc.courseStart
	                            +"&courseEnd="+lc.courseEnd
	                            +"&courseTime="+lc.courseTime
	                            +"&coursePlace="+lc.coursePlace
	                            +"&teacherXl="+lc.teacherXl
	                            +"&teacherSex="+lc.teacherSex
	                            +"&teacherTel="+lc.teacherTel
	                            +"&teacherDesc="+lc.teacherDesc
								+"'>"+lc.courseName+"</a>"
								+"</h2>"
							    +"</p>"
							+"<div class='course-cost free-cost'>"+lc.courseStart+"</div>"
							+"</div>"
						+"</li>"	
				);
			});
		});
	});
	
	
		layui.use([ 'laydate', 'element', 'laypage', 'layer' ], function() {
			$ = layui.jquery;//jquery
			laydate = layui.laydate;//日期插件
			lement = layui.element();//面包导航
			laypage = layui.laypage;//分页
			layer = layui.layer;//弹出层
            //以上模块根据需要引入
            
            //分页导航
			laypage({
				cont : 'page',
				skin: '#5FB878',
				pages : ${pd.totalPage},//总页数
				first : 1,
				last : ${pd.totalPage},//总页数
				curr: ${pd.page},//当前页数
				prev : '<em>上一页</em>',
				next : '<em>下一页</em>',
				jump: function(obj, first){
			        //首次不执行
			        if(!first){
			        	//跳转到Servlet 传递参数：page当前页数、 pageSize每页显示记录数
			        	location.href="CCPTServlet?op=queryByPage&page="+obj.curr+"&keywords="+$("#keywords").val();
			        }
			    }
			});
        });
	</script>
	<!--退出登录-->
	<script>
		layui.use([ 'layer' ],function() {
			$ = layui.jquery;//jquery
			layer = layui.layer;//弹出层
			$("#Logout").click(function() {
					layer.confirm('确认要退出登录吗？',function(index) {
						$.ajax({
							url : "LoginServlet",
							type : "get",
							data : {
								op1:"logout"
							},
							success : function(data) {
								if (data.code == 1) {
									location.href = "http://localhost:8080/EmpTrainingTest/Login.jsp";
									return false;
								} 
							},
							dataType : "json"
						});	
					});
				});
			});
	</script>


</body>
</html>